<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>27_BFC</title>
        <style>
            .wrapper {
                width: 800px;
                border: 5px dashed red;
            }
            .box {
                width: 200px;
                height: 150px;
                border: 1px solid black;

                /* (1)浮动开启bfc 
                    浮动确实能开启bfc 但是会造成高度塌陷
                */
                /* float: left; */

                /* （2）定位 
                    定位也确实能开启bfc 但是同样也会脱离文档流
                */
                /* position: absolute;
                position: fixed; */

                /* （3）overflow: hidden;
                    本身的意思是溢出隐藏所以我们也不需要他来开启bfc
                */
                /* overflow: hidden; */

                /* （4）display：inline-block */
                /* 改变元素了元素的显示模式 */
                /* display: inline-block; */

                /* （5） */
                column-count: 1;

                /* （6）column-span: all */
                column-span: all;

                /* （7） */
                /* display: flex; */

                /* （8） */
                display: flow-root;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>

        <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque cum ipsum qui dignissimos necessitatibus sapiente architecto fuga, quia, quod similique dolor corrupti beatae! Rem corporis sapiente molestiae eaque deserunt. Ratione.
        </div>
    </body>
</html>